<template>
    <el-dialog
            :title="title"
            :visible.sync="isVisible"
            :width="width"
            :before-close="handleClose"
            :lock-scroll="true"
            :close-on-click-modal="false"
            custom-class="pub_dialog"
            @open="getData"
    >
        <VForm
                ref="vformComponents"
                :form="formData.form"
                :options="formData.options"
                :rules="formData.rules"
                :labelWidth="formData.labelWidth"
                :rowspan="rowspan"
        ></VForm>

        <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
    import { alarmRecordReportDetail,
            alarmRecordReportUpdate,
            alarmRecordReportAdd } from '@/api/risk/alarmReport'
    import VForm from "@/components/VForm/index";
    export default {
        components: {
            VForm,
        },
        props: {
            width: {
                type: String,
                default: "70%",
            },
            title: {
                type: String,
                default: "详情",
            },
            id:{},
            openType:{
                type:String,
                default:"add"
            },
            dialogVisible: {
                type: Boolean,
                default: false
            }
        },
        watch: {
            'width': {
                handler(newVal, oldVal) {
                    console.log('newVal===',newVal, oldVal)
                    let w = this.width.split('%')[0]
                    if(w>=60){
                        this.rowspan = 2
                    }else{
                        this.rowspan = 1
                    }
                },
                deep: true,
                immediate: true
            },
        },
        computed: {
            isVisible: {
                get() {
                    return this.dialogVisible
                },
                set() {
                    this.close()
                }
            }
        },
        data() {
            return {
                rowspan:1,
                dict:{},
                formData: {
                    form: {
                            csjs:"",
                            tjyf:"",
                            bjlx:"",
                            bjzs:"",
                            yjbjzs:"",
                            ejbjzs:"",
                            sjbjzs:"",
                            bjyczs:"",
                            bjwczs:"",
                            bjfxzs:"",
                            fxbg:[],
                            bjczdw:"",
                        },
                    options: [
                                   {
                                       title: "城市简述",
                                       key: "csjs",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "统计月份",
                                       key: "tjyf",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "报警类型",
                                       key: "bjlx",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "报警总数",
                                       key: "bjzs",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "一级报警总数",
                                       key: "yjbjzs",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "二级报警总数",
                                       key: "ejbjzs",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "三级报警总数",
                                       key: "sjbjzs",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "报警已处置数",
                                       key: "bjyczs",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                       title: "报警未处置数",
                                       key: "bjwczs",
                                       type: "text",
                                       disabled: true
                                   },
                                   {
                                     title: "报警处置单位",
                                     key: "bjczdw",
                                     type: "text",
                                   },
                                   {
                                       title: "报警分析综述",
                                       key: "bjfxzs",
                                       type: "textarea",
                                       columnWidth:'w100'
                                   },
                                   {
                                       title: "分析报告",
                                       key: "fxbg",
                                       type: "file",
                                       fileType:"file",
                                       listType:"text",
                                       uploadTextTip:""
                                   },
                    ],
                    rules: {
                        bjfxzs :[
                          {max:1000, message: '长度最大为1000个字符', trigger: 'blur'}
                        ],
                        bjczdw :[
                          {max:100, message: '长度最大为100个字符', trigger: 'blur'}
                        ],
                    },
                    labelWidth: "100px",
                },
            // 字典
            };
        },
        methods: {
            submitFormat(){
                   this.formData.form.tjyf = null
                   this.formData.form.TJYF = null
                   this.formData.form.fxbg = JSON.stringify(this.formData.form.fxbg)
            },
            loadFormat(){
                    this.formData.form.fxbg  = this.formData.form.fxbg ? JSON.parse(this.formData.form.fxbg) : []
            },
            sure(){
                console.log('sure===',this.formData.form)
                this.$refs.vformComponents.$refs.form.validate().then(res=>{
                    this.submitFormat()
                    if(this.openType == "add"){
                        this.add()
                    }else{
                        this.update()
                    }
                })
            },
            add(){
                this.formData.form.id = null
                alarmRecordReportAdd(this.formData.form).then(res=>{
                    if(res.code==200){
                    this.$message({
                        message: this.$t('tips.createSuccess'),
                        type: 'success'
                    })
                    this.closeSuccess()
                    }else{
                    this.$message({
                        message: this.$t('tips.systemException'),
                        type: 'error'
                    })
                    }
                })
            },
            update(){
                   alarmRecordReportUpdate(this.formData.form).then(res=>{
                        if(res.code==200){
                        this.$message({
                             message: this.$t('tips.updateSuccess'),
                            type: 'success'
                        })
                        this.closeSuccess()
                      }else{
                        this.$message({
                            message: this.$t('tips.systemException'),
                            type: 'error'
                        })
                     }
                })
            },
            cancel(){
                this.close()
            },
            handleClose(done) {
                done()
                this.close()
            },
            closeSuccess(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$emit('success')
            },
            close(){
                this.$refs.vformComponents.$refs.form.resetFields();
                this.$emit('close')
            },
            getData(){
                if(this.openType!="add"){
                    alarmRecordReportDetail(this.id).then(res=>{
                        if(res.code==200){
                            this.formData.form = res.data
                            this.loadFormat()
                         }else{
                            this.$message({
                                message: this.$t('tips.systemException'),
                                type: 'error'
                            })
                        }
                    })
                }
            }
        },
    };
</script>

<style lang="scss" scoped>

</style>
